<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>jQuery Layer Popup</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<link type="text/css" rel="stylesheet" href="../preset/preset.css" />
		<style type="text/css">
			.layer_area {
				position: absolute;
				left: 50%;
				top: 50%;
				background: #fff;
				padding: 20px;
				border: 4px solid #ddd;
			}
			
			
			@font-face {font-family:ngttf; src:url(NanumGothic.ttf);}
			@font-face {font-family:ngeot; src:url(NanumGothic.eot);}
			
			* {margin:0; padding:0; font-family:ngeot, ngttf, Nanumgothic;}
			html, body {_height:100%; font-family:ngttf, ngeot;}
			img, fieldset { border:0;}
			form, fieldset { margin:0; padding:0;}
			em, address { font-style:normal;}
			button{ margin:0; padding:0; overflow:visible; cursor:pointer;}
			a { text-decoration:none;}
			a:hover, a:active, a:focus {text-decoration:underline;}
			table {table-layout:fixed; border-collapse:collapse;}
			
			/* Button Common */
			.button,
			.button *{ position:relative; margin:0; padding:0; display:inline-block; text-decoration:none !important; border:0; font-size:12px; white-space:nowrap; background:url(button.gif) no-repeat; vertical-align:top; overflow:visible; color:#333;}
			.button { margin-right:4px;}
			.button *{ left:4px; cursor:pointer; _cursor:hand;}
			.button.medium, .button.medium *{ height:24px; line-height:21px;}/* 맑은고딕을 사용할 경우 21px, 돋움을 사용할 경우 24px 사용 */
			.button.medium { background-position:left 0;}
			.button.medium *{ padding:0 10px 0 6px; font-size:12px; background-position:right top;}
			/* Button Hover */
			.button *:hover,
			.button *:active,
			.button *:focus{ color:#06a;}
			/* Button Icon Variation */
			.button.icon *{ padding-left:20px;}
			.button.icon span{ width:20px; margin-right:-20px; padding:0 !important;}
			.button.medium .check{ background-position:4px -150px;}
			.button.medium .add{ background-position:-16px -150px;}
			.button.medium .delete{ background-position:-34px -150px;}
			.button.medium .calendar{ background-position:-56px -150px;}
			.button.medium .refresh{ background-position:-76px -150px;}
			.button.medium .download{ background-position:-96px -151px;}
			
			/* Common Class */
			.iText{ border:1px solid #b7b7b7; border-right-color:#e1e1e1; border-bottom-color:#e1e1e1; background:transparent;}
			.iCheck, .iRadio{ width:13px; height:13px; margin:0; padding:0; vertical-align:middle;}
			.hide{ position:absolute; left:0; top:0; width:1px; height:1px; font-size:0; line-height:0; visibility:hidden;}
			
			/* Popup Layer */
			.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:10000;}
			.open {display:block;}
			.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.5; filter:alpha(opacity=50);}

		</style>
	</head>
	<body>
		<div style="margin:30px;">
			<span class="button medium"><a href="#" id="layer_open">팝업창 열기</a></span>
		</div>

		<div class="layer">
			<div class="bg"> </div>
			<div class="layer_area" id="layer1">
				<p style="width:400px; text-align:justify; font-family:Malgun gothic;">
					이 것은 팝업창입니다. 뜨는 레이어의 크기에 상관없이 항상 가운데 오게 작업하였습니다. 도큐먼트보다 클 경우에는 좌측/상단에 고정되게 하였습니다.
				</p>
				<br />
				<span class="button medium"><a href="#" id="layer_close">팝업창 닫기</a></span>
			</div>
		</div>

		<script type="text/javascript">
			jQuery(function($) {
				function layer_open(el) {
					//$('.layer').addClass('open');
					$('.layer').fadeIn();
					var temp = $('#' + el);
					if (temp.outerHeight() < $(document).height())
						temp.css('margin-top', '-' + temp.outerHeight() / 2 + 'px');
					else
						temp.css('top', '0px');
					if (temp.outerWidth() < $(document).width())
						temp.css('margin-left', '-' + temp.outerWidth() / 2 + 'px');
					else
						temp.css('left', '0px');
				}

				$('#layer_open').click(function() {
					layer_open('layer1');
					/* 열고자 하는 것의 아이디를 입력 */
					return false;
				});
				// $('.layer .bg').click(function() {
					// $('.layer').fadeOut();
				// });
				$('#layer_close').click(function() {
					$('.layer').fadeOut();
					return false;
				});
				$(document).ready(function() {
				});
			});
		</script>
	</body>
</html>